<template>
  <div class="action-bar">
    <div class="bar-row">
      <div class="bar-item" @click="$emit('preview', 1)">
        <img :src="principleImg" class="bar-icon" />
        <div class="bar-label">原理图</div>
      </div>
      <div class="bar-item" @click="$emit('preview', 2)">
        <img :src="sampleImg" class="bar-icon" />
        <div class="bar-label">接线图</div>
      </div>
      <div class="bar-item" @click="$emit('undo')">
        <img :src="isUndo ? undoImg : undoDisabledImg" class="bar-icon" />
        <div class="bar-label">后退</div>
      </div>
      <div class="bar-item" @click="$emit('redo')">
        <img :src="isRedo ? redoImg : redoDisabledImg" class="bar-icon" />
        <div class="bar-label">前进</div>
      </div>
      <div class="bar-item" @click="$emit('reset')">
        <img :src="resetImg" class="bar-icon" />
        <div class="bar-label">重置</div>
      </div>
      <div class="bar-item" @click="$emit('scale')">
        <img :src="scaleImg" class="bar-icon" />
        <div class="bar-label">{{ scale ? scale + '%' : '缩放' }}</div>
      </div>
    </div>
    <div v-if="paddingBottom" :style="{ height: paddingBottom + 'px' }"></div>
  </div>
</template>

<script>
import * as assets from '../assets.js';
export default {
  name: 'ActionBar',
  props: {
    paddingBottom: { type: Number, default: 0 },
    scale: { type: Number, default: 0 },
    isRedo: { type: Boolean, default: false },
    isUndo: { type: Boolean, default: false },
  },
  data() {
    return {
      principleImg: assets.b1,
      sampleImg: assets.b2,
      undoImg: assets.b3,
      undoDisabledImg: assets.b31,
      redoImg: assets.b4,
      redoDisabledImg: assets.b41,
      resetImg: assets.b5,
      scaleImg: assets.b6,
    };
  },
};
</script>

<style scoped>
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: #fff;
  z-index: 30;
}
.bar-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 12px;
  height: 60px;
  max-height: 60px;
}
.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  color: #222;
}
.bar-icon {
  width: 25px;
  height: 25px;
}
.bar-label {
  font-size: 12px;
  margin-top: 2px;
}
</style> 